<template>
  <div class="app-container">
    <el-row :gutter="10" style="position: relative; margin-bottom: 5px">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-search"
          size="mini"
          @click="handleSearch"
          >搜索</el-button
        >
      </el-col>
      <el-col :span="12.5" style="position: absolute; right: 35px; top: 0">
        <Page
          style="margin-right: 0px"
          :current="queryParams.pageNum"
          :page-size="queryParams.pageSize"
          :total="total"
          @on-change="pageChange"
          simple
        ></Page>
      </el-col>
    </el-row>
    <!-- 主表 -->
    <el-table
      v-loading="loading"
      border
      highlight-current-row
      :height="tableDataHeight"
      :cell-style="pariCellStyle"
      :header-cell-style="{ 'text-align': 'center', padding: '2px' }"
      :data="tableData"
      @row-click="getListChild"
      @selection-change="handleSelectionChange"
    >
      <template v-for="(item, index) in columns">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :formatter="item.formatter"
          :min-width="item.minwidth"
          align="center"
        />
      </template>
    </el-table>
    <!-- 子表 -->
    <el-table
      v-loading="loading"
      border
      highlight-current-row
      :cell-style="iCellStyle"
      :height="tableDataChildHeight"
      :header-cell-style="{ 'text-align': 'center', padding: '2px' }"
      :data="tableDataChild"
    >
      <template v-for="(item, index) in columnsChild">
        <el-table-column :prop="item.prop" :label="item.label" align="center" />
      </template>
      <el-table-column label="操作" align="center" width="100">
        <template #default="scope">
          <el-button
            v-if="curRow.state != 2"
            type="text"
            icon="el-icon-check"
            size="mini"
            @click="handleOK(scope.row)"
            >确认</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 搜索框 -->
    <el-dialog
      title="搜索"
      v-model="SearchVisible"
      width="50%"
      draggable
    >
      <el-form ref="dialogForm" :model="queryParams" label-width="100px">
        <el-form-item label="请购单号" prop="sourceOrder">
          <el-input
            v-model="queryParams.sourceOrder"
            placeholder="请输入请购单号"
          />
        </el-form-item>
        <el-form-item label="采购单号" prop="orderCode">
          <el-input
            v-model="queryParams.orderCode"
            placeholder="请输入采购单号"
          />
        </el-form-item>
        <el-form-item label="综合查询" prop="productNormModel">
          <span slot="label">
            <el-tooltip
              content="综合查询包含物料代码，品名规格，客户编码查询"
              placement="top"
            >
              <i class="el-icon-question"></i>
            </el-tooltip>
            综合查询
          </span>
          <el-input
            v-model="queryParams.productNormModel"
            placeholder="综合查询包含物料代码，品名规格，客户编码查询"
          />
        </el-form-item>
        <el-form-item label="单据状态" prop="state">
          <el-select
            v-model="queryParams.state"
            placeholder="请选择单据状态"
            style="width: 100%"
          >
            <el-option label="已保存" :value="0"></el-option>
            <el-option label="报价中" :value="1"></el-option>
            <el-option label="已确定" :value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="SearchCancel">取 消</el-button>
        <el-button type="primary" @click="handleQery">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//采购选择确认
import baseService from "@/api/purchase/needSend";
export default {
  name: "NeedSend",
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        productNormModel: "",
        orderCode: "",
        sourceOrder: "",
        state: 1,
      },
      total: null,
      loading: true,
      SearchVisible: false,
      columns: [
        { prop: "orderCode", label: "采购单号" },
        { prop: "sourceOrder", label: "请购单号" },
        { prop: "productCode", label: "物料代码" },
        { prop: "productNormModel", label: "品名规格", minwidth: "180px" },
        { prop: "purchaseNumber", label: "采购数量" },
        {
          prop: "state",
          label: "状态标志",
          formatter: (row, column, cellValue) => {
            return cellValue == 2
              ? "已确定"
              : cellValue == 1
              ? "报价中"
              : "已保存";
          },
        },
        { prop: "sourceType", label: "来源类型" },
        { prop: "createBy", label: "创建者" },
        { prop: "createTime", label: "创建时间" },
        { prop: "updateBy", label: "更新者" },
        { prop: "updateTime", label: "更新时间" },
        { prop: "remark", label: "备注" },
      ],
      columnsChild: [
        { prop: "productCode", label: "物料代码" },
        { prop: "unitPrice", label: "采购单价" },
        { prop: "supplier", label: "供应商代码" },
        { prop: "productNormModel", label: "品名规格" },
        { prop: "createBy", label: "创建者" },
        { prop: "createTime", label: "创建时间" },
        { prop: "updateBy", label: "更新者" },
        { prop: "updateTime", label: "更新时间" },
        { prop: "remark", label: "备注" },
      ],
      tableData: [],
      tableDataChild: [],
      tableDataHeight: document.body.clientHeight / 2 - 82,
      tableDataChildHeight: document.body.clientHeight / 2 - 100,
      curRow: {
        state: null,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    iCellStyle({ row, column, rowIndex, columnIndex }) {
      //启动
      if (row.state == "1") {
        return "color:red";
      }
    },
    //获取主表数据
    getList() {
      baseService.getList(this.queryParams).then((res) => {
        if (res.code == 200) {
          this.tableData = res.rows;
          this.total = res.total;
          this.getListChild(res.rows[0]);
          this.loading = false;
        }
      });
      this.SearchCancel();
    },
    //主表点击获取子表
    getListChild(row) {
      if (this.curRow == row) return;
      if (row) {
        baseService.getListChild(row).then((res) => {
          if (res.code == 200) {
            this.tableDataChild = res.data;
          }
        });
        this.curRow = row;
      } else {
        this.tableDataChild = [];
      }
    },
    //主表多选框事件
    handleSelectionChange() {},
    //打开搜索框
    handleSearch() {
      this.SearchVisible = true;
    },
    //关闭搜索框
    SearchCancel() {
      this.SearchVisible = false;
    },
    handleQery() {
      this.getList();
    },
    pageChange(page) {
      this.queryParams.pageNum = page;
      this.getList();
    },
    //选择确认
    handleOK(row) {
      this.$confirm("是否确认该供应商?", "警告", {
        confirmButtonText: "确 定",
        cancelButtonText: "取 消",
        type: "warning",
      }).then(() => {
        baseService.confirmPurchase(row).then((res) => {
          this.getList();
          this.msgSuccess("操作成功!");
        });
      });
    },
  },
};
</script>

<style></style>
